<template>
  <div class="lion">
    <div id="world"></div>
    <div id="instructions">
      Press and drag to make wind<br /><span class="lightInstructions"
        >the lion will surely appreciate</span
      >
    </div>
  </div>
</template>

<script lang="ts">
// import ThreeJs from "./index.ts";
// import * as ThreeJs from "./lion.js";
import { defineComponent, onMounted } from "vue";
export default defineComponent({
  name: "Lion",
  props: {},
  setup() {
    onMounted(() => {
      // new ThreeJs();
      // ThreeJs.init();
      // ThreeJs.createLights();
      // ThreeJs.createFloor();
      // ThreeJs.createLion();
      // ThreeJs.createFan();
      // ThreeJs.loop();
      // console.log(ThreeJs);
    });
  },
});
</script>
<style scoped lang="scss">
#world {
  background: #ebe5e7;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#instructions {
  position: absolute;
  width: 100%;
  top: 50%;
  margin: auto;
  margin-top: 120px;
  font-family: "Open Sans", sans-serif;
  color: #653f4c;
  font-size: 0.9em;
  text-transform: uppercase;
  text-align: center;
  user-select: none;
}
.lightInstructions {
  color: #993f4c;
  font-size: 0.8em;
}
</style>
